<script setup lang="ts">
import { NButton } from 'naive-ui'

defineProps<{
    title?: string
    action?: boolean
    loading?: boolean
    titleStyle?: string
    export?: boolean
}>()

const emit = defineEmits<{
    (event: 'close'): void
    (event: 'submit'): void
}>()

const handleClose = () => emit('close')
const handleSubmit = () => emit('submit')
</script>

<template>
    <div class="modal-card">
        <div v-if="title" class="modal-card__title" :style="titleStyle">
            {{ title }}
        </div>
        <slot></slot>
        <div v-if="action" class="modal-card__action">
            <NButton color="#999999" style="width: 100rem" ghost @click="handleClose">
                取消
            </NButton>
            <NButton type="primary" style="width: 100rem;margin-left: 10px;" :loading=" loading " @click=" handleSubmit "
                v-if="export">
                导出
            </NButton>
        </div>
    </div>
</template>

<style scoped lang="scss">
.modal-card {
    min-width: 150rem;
    background: #e1e1e1;
    border-radius: 8rem;

    &__title {
        font-size: 22rem;
        padding: 36rem 44rem 0;
        line-height: 1;
    }

    &__action {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0 16rem;
        padding: 26rem 52rem;
    }
}
</style>
